<template>
  <div v-show="header.showRefresh" class="icon-container" @click="handleRefresh">
    <el-icon size="25" :class="{ rotate: isRotated }"><RefreshRight /></el-icon>
  </div>
</template>

<script setup lang="ts">
import {useLayouts} from "@/stores/modules/layouts.ts";

// 获取 layouts 状态
const layouts = useLayouts()
// 使用 storeToRefs 解构出来的属性默认是只读的，不能改变值，修改也无法响应式更新
const { header } = storeToRefs(layouts)

const router = useRouter()
// 刷新旋转
const isRotated = ref(false);
const handleRefresh = () => {
  // router.go(0) 在 Vue Router 中用于刷新当前页面。它的具体作用是让浏览器重新加载当前的路由页面，类似于执行浏览器的刷新操作。
  // 横跨历史，参考 vue-router 官方文档： https://router.vuejs.org/zh/guide/essentials/navigation.html
  router.go(0); // 刷新当前路由

  // 切换旋转状态
  isRotated.value = true;

  // 在动画结束后取消旋转状态
  setTimeout(() => {
    isRotated.value = false;
  }, 500); // 500ms 是动画时长，可以根据实际情况调整
}
</script>

<style scoped lang="scss">
.icon-container {
  cursor: pointer;
  transition: transform 0.5s ease;
}

.rotate {
  animation: rotate 0.5s forwards;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>